<!--
 * @Description:
 * @version:
 * @Author: 尹鹏孝
 * @Date: 2023-02-22 08:23:21
 * @LastEditors: 尹鹏孝
 * @LastEditTime: 2023-02-22 14:28:18
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid布局基本概念</title>
</head>
<body>
    一、基本概念
    1、容器和项目，
    采用网格布局的区域称为容器，容器内部采用网格定位子元素，称为项目，项目只能是容器的顶层子元素不包括项目的子元素。
    2、行和列
    容器里水平区域称为行row，垂直区域称为列column。
    3、单元格
    行列交叉的区域称为单元格cell,正常情况下n行，m列会产生n*m个单元格。
    4、网格线
    划分网格的线称为网格线，n行有n+1条水平网格线，m列有m+1根垂直网格线。
    网格布局的特性：
    设置网格布局后，容器子元素，项目的float，display：inline-block,display:table-cell ,vertical-align和column-*等设置都失效

   二、容器属性
   1、grid模板属性
    grid-template-row、grid-template-columns属性
    grid-template-columns 设置每一列的列宽，grid-template-rows属性定义每一行的行高。
    1)行高列宽可以使用绝对单位还可使用、百分比，有时候写一样的值会很麻烦，特别是网格很多时候，这时候，使用repeat函数可以达到简化的目的。
    repeat(重复的数量，重复数量的值)repeat(3,100px)
    repeat重复某种模式比如repeat(2,100px,20px,80px),是将后面的重复2次。即第四列，第五列第六列分别是100px,20px,和80px.
    repeat(auto-fill,100px)表示可以使用auto-fill填充每一列，但是具体多少行或者列不清楚，但是每一列或者行的宽度、高度固定。
    fr关键字：表示片段。1fr,2fr两列的宽度后者是前者的两倍,fr可与其他单位配合使用grid-template-row:1fr 2fr
    minmax函数，用于表示一个长度范围里取最大和最小范围之间的值:grid-template-row:1fr 1fr minmax(100px,2fr)
    auto关键字，表示用于浏览器自己决定长度 grid-template-columns:100px auto 100px ;
    网格线名称可以使用方括号指定每一根网格线的名字，方便以后引用:
    grid-template-columns:[c1] 100px [c2]100px [c3] auto [c4];
    grid-template-rows:[r1] 100px [r2]100px [r3] auto [r4];

    布局实例
    .wrapper{
        display:grid;
        grid-template-columns:70% 30%;
    }
    2、grid-row-gap属性和grid-columns-gap用于设置行和列的间隔，grid-gap是二者的简写，先行后列。
    3、grid-template-areas属性允许指定区域，一个区域由单个或者多个单元格组成，grid-template-areas属性用于定义区域。
        grid-template-areas:'header header header'
                            'main main sidebar'
                            'footer footer footer'
    4、grid-auto-flow内容子元素会按照顺序自动填在每一个网格，默认放置顺序是先行后列，也可以变成先列后行。还可以设置dense用于填充紧致

    5、justify-content、item-content 和place-content。 指的是设置整个内容区域对齐方式，justify-content表示水平区域，align-content表示垂直区域。
    place-content表示这两者的简称先垂直后水平。如果只写一个表示两个值一样。
    6、justify-items和align-items和place-items表示单元格内容的水平和垂直放置位置，place-items是两者的简写。
    三、项目属性
    1、gird-columns-start、gird-columns-end、gird-row-start、gird-row-end
    .item-1 {
    grid-column-start: 2;
    grid-column-end: 4;
    }标识：1号项目左边框是第二根线条，右边第四根线。

    .item-1 {
    grid-column-start: header-start;
    grid-column-end: header-end;
    }指定网格线的名字左边框指的是header-start名称，有边框名称也是网格线名称。
    .item-1 {
    grid-column-start: span 2;
    }指的是跨越多少格子

    grid-column、grid-row是简写形式。
    2、grid-area属性指定项目放在哪个区域。后面跟的是区域名称还可以指定grid-row-start、grid-column-start、grid-row-end、grid-column-end合并的简写形式

    3、justify-self，algin-self、place-self。justify-self是设置单元内容水平位置，左中右，和justify-items的用法完全一致但是作用域单个项目。align-self属性设置单元格的垂直属性，跟algin-items 的属性用完全一致，也作用单个项目。
    place-self是二者的简写形式align-self和justify-self的简写形式。












</body>
</html>